<template>
  <el-dialog :title="title" :visible="show" :before-close="cancel">
    <el-table :data="list" stripe border v-loading="loading">
      <el-table-column prop="deptId" label="ID"></el-table-column>
      <el-table-column prop="companyId" label="所属公司ID"></el-table-column>
      <el-table-column prop="deptName" label="组织机构名称"></el-table-column>
      <el-table-column prop="deptPId" label="上级组织机构ID"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from "vue-property-decorator";
// lib
// components & widgets
import TableArea from "./TableArea.vue";
// config
// script
// controller & service
import { getDeptListService } from "@/biz/dept/service";
// interface
import { DeptDto } from "@/biz/dept/model";
import logUtils from "@/utils/logUtils";
// 其它

@Component({
  components: {
    TableArea,
  },
})
export default class TableModal extends Vue {
  list: any = [];
  loading = true;
  title="下级组织"
  @Prop(Boolean) show!: boolean;
  @Prop(Object) info!: DeptDto | null;
  @Emit("close")
  cancel() {
    return false;
  }
  @Emit("close")
  ok() {
    return true;
  }
  @Watch("show")
  onChangeValue(newVal: boolean) {
    if (newVal) {
      logUtils.log(123);
      getDeptListService({
        deptPId: parseInt(this.info?.deptPId as string, 10) + 1,
      }).then((v) => {
        logUtils.log("V", v);
        this.list = v.payload;
        this.loading = false;
      });
      // 设置复杂值
      if (this.info) {
        // TODO
      }
    }
  }
}
</script>

<style lang="scss"></style>
